<template>
  <div>
    <el-table :data="tableData.records"
              style="width: 100%"
              border
              align="center">
      <el-table-column :prop="item.prop"
                       :label="item.label"
                       :width="item.width"
                       v-for="(item,index) in tableList"
                       :key="'tab'+index">
      </el-table-column>
      <el-table-column prop="skuStatus"
                       label="商品状态"
                       width="120px">
        <template slot-scope="scope">
          <el-tag size="medium"
                  v-if="scope.row.skuStatus == 'ACTIVE'">
            {{ scope.row.skuStatus | formatterSkuStatus }}</el-tag>
          <el-tag size="medium"
                  v-else-if="scope.row.skuStatus == 'UNACTIVE'"
                  type="danger">{{ scope.row.skuStatus | formatterSkuStatus }}</el-tag>
          <el-tag size="medium"
                  v-else-if="scope.row.skuStatus == null"
                  type="success">{{ scope.row.skuStatus | formatterSkuStatus }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="首个图片"
                       width="80px"
                       align="center">
        <template slot-scope="scope">
          <el-avatar shape="square"
                     :size="50"
                     :src="scope.row.imgFirst"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   class="page"
                   @current-change="handleCurrentChange"
                   :current-page="tableData.current"
                   :page-sizes="[2, 4, 5, 8]"
                   :page-size="tableData.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="tableData.total">
    </el-pagination>
  </div>

</template>

<script>
import { queryList } from '@/api/good'
export default {
  data () {
    return {
      tableData: [],
      queryGood: {
        page: 1,
        size: 4
      },
      tableList: [{
        "prop": 'id',
        "label": '序号',
        "width": "50px"
      },
      {
        "prop": 'name',
        "label": '商品名称',
        "width": "120px"

      }, {
        "prop": 'sellPrice',
        "label": '售价',
        "width": "50px"
      }, {
        "prop": 'costPrice',
        "label": '成本价',
        "width": "70px"
      },
      // {
      //   "prop": 'skuStatus',
      //   "label": '商品状态',
      //   "width": "100px"
      // },
      {
        "prop": 'num',
        "label": '库存',
        "width": "50px"
      },
      {
        "prop": 'menu.name',
        "label": '菜单类目',
        "width": "100px"
      }
      ]
    }
  },
  created () {
    queryList(this.queryGood).then((res) => {
      this.tableData = res.data
      console.log(this.tableData);
    })
  },
  filters: {
    formatterSkuStatus (val) {
      if (val == 'ACTIVE') {
        return '上架';
      } else if (val == 'UNACTIVE') {
        return '下架';
      } else {
        return '暂无状态';
      }
    }
  },
  methods: {
    list (type, goodForm) {
      console.log(goodForm);
      //把goodForm 属性和属性拷贝给queryGood
      Object.assign(this.queryGood, goodForm)
      this.queryGood.skuStatus = type
      if (type == 'all') {
        this.queryGood.skuStatus = null;
      }
      console.log(this.queryGood);
      queryList(this.queryGood).then((res) => {
        this.tableData = res.data
        this.queryGood.size = this.tableData.size
      })
    },
    handleSizeChange (val) {
      this.queryGood.size = val;
      queryList(this.queryGood).then((res) => {
        this.tableData = res.data
        this.queryGood.size = this.tableData.size
      })
    },
    handleCurrentChange (val) {
      this.queryGood.page = val;
      queryList(this.queryGood).then((res) => {
        this.tableData = res.data
        this.queryGood.size = this.tableData.size
      })
    },
    handleEdit (row) {
      this.$emit('open', "update", row);
    }
  }

}
</script>

<style lang="sass" scoped>
.page
  margin-top: 15px
</style>